<style scoped>
</style>

<template>

  <div>

    <Modal
      v-model="IsModalShow"
      :title="modalFormTitle"
      :mask-closable="false"
      @on-cancel="cancel"
      width="600"
    >
      <Form
        ref="modalForm"
        :model="modalForm"
        :label-width="100"
        value=true
        style="padding: 3px 60px"
      >
        <Form-item
          label="单位名称"
          prop="groupName"
          :rules="{required: true, message: '必填,1-50位字符',min:1,max:100, trigger:'blur',type:'string'}"
        >
          <Input v-model="modalForm.groupName"></Input>
        </Form-item>
        <Form-item
          label="责任人"
          prop="managerName"
          :rules="{required: true, message: '必填,1-50位字符',min:1,max:100, trigger:'blur',type:'string'}"
        >
          <Input v-model="modalForm.managerName"></Input>
        </Form-item>
        <Form-item
          label="联系电话"
          prop="managerMobile"
          :rules="{required: true, message: '输入11位手机号', trigger:'blur',type:'string',pattern: /^1\d{10}$/}"
        >
          <Input v-model="modalForm.managerMobile"></Input>
        </Form-item>
        <Form-item
          label="办公室电话"
          prop="officeMobile"
        >
          <Input v-model="modalForm.officeMobile"></Input>
        </Form-item>
        <Form-item label="所属区域">
          <Cascader
            :data="AreasComboList"
            change-on-select
            transfer
            v-model="modalForm.smkAreasId"
          ></Cascader>
        </Form-item>
        <Form-item
          label="所属维保单位"
          prop="smkMaintenanceId"
          :rules="{required: true, message: '必选', trigger:'change', type:'number'}"
        >
          <Select
            v-model="modalForm.smkMaintenanceId"
            placeholder="请选择"
          >
            <Option
              v-for="item in MaintenanceComboList"
              :value="item.id"
              :key="item.id"
            >{{ item.mainName }}</Option>
          </Select>
        </Form-item>
        <Form-item
          label="单位地址"
          prop="addr"
        >
          <Input
            v-model="modalForm.addr"
            type="textarea"
          ></Input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button
          type="ghost"
          @click="cancel"
        >关闭</Button>
        <Button
          type="primary"
          :loading="modalForm_loading"
          @click="saveForm('modalForm')"
        >保存</Button>
      </div>
    </Modal>
  </div>

</template>

<script>
import {
  saveGroupCompany,
  getAreasCascader,
  getMaintenanceCombo
} from "@/api/getData";
export default {
  props: {
    parentForm: {
      type: Object,
      default: function() {
        return {
          id: "",
          smkAreasId: "",
          smkMaintenanceId: "",
          groupName: "",
          managerName: "",
          managerMobile: "",
          addr: "",
          officeMobile: "",
          groupType: ""
        };
      }
    },
    modalShow: {
      type: Boolean,
      default: true
    },
    modalFormTitle: {
      type: String,
      default: "添加联网单位"
    }
  },
  data() {
    return {
      IsModalShow: false,
      modalForm: {},
      modalForm_loading: false,
      AreasComboList: [],
      MaintenanceComboList: []
    };
  },
  watch: {
    modalShow(curVal, oldVal) {
      this.modalForm = Object.assign(this.parentForm);
      if (this.parentForm.smkAreasId && curVal) {
        this.modalForm.smkAreasId = this.parentForm.smkAreasId
          .split(",")
          .map(function(item) {
            return parseInt(item);
          });
      }
      this.IsModalShow = curVal;
    }
  },
  created() {},
  mounted() {
    this.getAreasComboList();
    this.getMaintenanceComboList();
  },
  methods: {
    async getAreasComboList() {
      let res = await getAreasCascader({ id: 0 });
      this.AreasComboList = res.data;
    },
    async getMaintenanceComboList() {
      let res = await getMaintenanceCombo();
      this.MaintenanceComboList = res.data;
      console.log("MaintenanceComboList" + this.MaintenanceComboList);
    },
    cancel() {
      this.$emit("listenModalForm");
    },
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          if (this.modalForm.smkAreasId.length != 2) {
            this.$Message.error("所属区域请选择区");
            return;
          }
          this.modalForm_loading = true;
          this.modalForm.GroupType = 0;
          let params = Object.assign(this.modalForm);
          params.departmentId = params.smkAreasId[params.smkAreasId.length - 1];
          params.smkAreasId = params.smkAreasId.join(",");

          try {
            let result = await saveGroupCompany(params);
            if (result.code == 0) {
              this.$emit("listenModalForm");
              this.$emit("refreshTableList");
            }
          } catch (err) {
            console.log(err);
            this.$Message.error("服务器异常，稍后再试");
          }
          this.modalForm_loading = false;
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    }
  }
};
</script>
